<template>
    <view :style="{ '--color': color, '--Top': totalHeight + 'px', '--Tops': totalHeight + 100 + 'px' }">
        <status-bar title="推广订单"></status-bar>
        <view class="Navbox">
            <view class="NavContent">
                <u-tabs
                    :list="list1"
                    :current="type - 1"
                    :scrollable="false"
                    :lineColor="color"
                    :itemStyle="itemStyle"
                    :activeStyle="activeStyle"
                    :inactiveStyle="inactiveStyle"
                    @click="click"
                ></u-tabs>
            </view>
            <view class="TimeBox">
                <text class="curentTime">{{ scanDate }}</text>
                <!-- <view class="allTime" @click="Reset">全部</view> -->
                <view class="iconfont icon-shaixuan" @click="show = true"></view>
            </view>
        </view>

        <view class="currentData" :style="statusHeight">
            <view class="list">
                <text class="list_title">{{ thisM.teamOrderNum }}</text>
                <text class="list_descr">当月销量</text>
            </view>
            <view class="list">
                <text class="list_title">{{ thisM.teamOrderMoney }}</text>
                <text class="list_descr">当月业绩</text>
            </view>
            <view class="list">
                <text class="list_title">{{ thisM.teamIncome }}</text>
                <text class="list_descr">当月收益</text>
            </view>
        </view>
        <!--  <view class="statusBox">
            <view class="list" :class="{ active: item.status == status }" v-for="(item, index) in statusList" :key="index" @click="changeStatus(item)">{{ item.name }}</view>
        </view> -->

        <view class="List" v-for="(item, index) in pageData" :key="index">
            <view class="Top">
                <view class="TopLeft">
                    <image :src="$imgUrls(item.buyer_info.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                    <view class="info">
                        <text class="black size30 ellipsis">{{ item.buyer_info.v_name }}</text>
                        <text class="h6 color_99 m-top8s">下单时间:{{ item.add_date }}</text>
                    </view>
                </view>
                <text class="size28 statusTxt" v-if="item.status == 0">待结算</text>
                <text class="size28 black" v-if="item.status == 1">已结算</text>
            </view>

            <view class="Center">
                <view class="CenterBox1" v-if="item.info.length == 1">
                    <image :src="$imgUrls(item.info[0].img)" mode="aspectFill" class="infoImg01"></image>
                    <text class="color_33 size26 flex-1 ellipsis_3">{{ item.info[0].name }}</text>
                </view>

                <view scroll-x="true" class="CenterBox2" v-else>
                    <view class="lis" v-for="(sub, subIndex) in item.info" :key="subIndex">
                        <view class="lisBox">
                            <image :src="$imgUrls(sub.img)" mode="aspectFill" class="subImg"></image>
                            <view class="subName ellipsis_3">{{ sub.name }}</view>
                        </view>
                    </view>
                </view>

                <view class="viewCount">共{{ item.info.length }}件</view>
            </view>

            <view class="Bot">
                <view class="d-flex a-center m-right30" v-if="item.total_money">
                    <text class="black size28">实付金额：</text>
                    <text class="h6 black">￥</text>
                    <text class="color size34">{{ item.total_money }}</text>
                </view>
                <view class="d-flex a-center" v-if="item.money">
                    <text class="black size28">预估收益：</text>
                    <text class="h6 color_ff4">￥</text>
                    <text class="color_ff4 size34">{{ item.money }}</text>
                </view>
            </view>

            <view class="black size30 p-bot20" v-if="item.up_team_user">{{ item.up_team_user }}</view>
        </view>

        <emptys v-if="!pageData.length"></emptys>

        <u-datetime-picker @cancel="show = false" @confirm="confirm" :show="show" v-model="value1" :maxDate="maxDate" mode="year-month"></u-datetime-picker>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                list1: [
                    {
                        name: '直推订单',
                        type: 1
                    },
                    {
                        name: '团队订单',
                        type: 2
                    }
                ],
                statusList: [
                    {
                        name: '全部',
                        status: ''
                    },
                    {
                        name: '待结算',
                        status: 1
                    },
                    {
                        name: '已结算',
                        status: 2
                    }
                ],
                type: 1, // 1 自助推广  2好友推广
                status: '', //空为全部   1待结算  2已结算
                page: 1,
                limit: 10,
                pageData: [],
                getMore: true,
                scanDate: '',
                show: false,
                value1: Number(new Date()),
                maxDate: Number(new Date()),
                thisM: ''
            };
        },
        onLoad(opt) {
            if (opt.type) this.type = opt.type;
            this.scanDate = this.$pop.tampToDate(Number(new Date()));
            this.promoteOrders();
        },
        methods: {
            promoteOrders() {
                this.$http
                    .post({
                        url: '/privateTeamApi/promoteOrders',
                        data: {
                            type: this.type,
                            status: this.status,
                            page: this.page,
                            limit: this.limit,
                            scanDate: this.scanDate
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.Toast(res.msg);
                        const result = res.data || [];
                        this.thisM = res.thisM;
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                    });
            },
            click(event) {
                this.type = event.type;
                this.status = '';
                this.Renewal();
            },
            changeStatus(item) {
                this.status = item.status;
                this.Renewal();
            },
            Renewal() {
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.promoteOrders();
            },
            confirm(e) {
                this.scanDate = this.$pop.tampToDate(e.value);
                this.show = false;
                this.Renewal();
            },
            Reset() {
                this.scanDate = '';
                this.Renewal();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.promoteOrders();
        },
        computed: {
            ...mapState(['color', 'navHeight', 'navWidth', 'totalHeight']),
            inactiveStyle() {
                return { color: '#333', fontSize: '16px' };
            },
            activeStyle() {
                return { color: '#000', fontSize: '17px' };
            },
            itemStyle() {
                return { height: '44px' };
            },
            statusHeight() {
                // #ifdef H5
                return { marginTop: this.totalHeight + 10 + 'px' };
                // #endif
                // #ifdef MP-WEIXIN
                return `margin-top: ${50}px`;
                // return [marginTop:100+'px'].join(';')
                // #endif
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 40rpx;
    }
</style>
<style lang="scss" scoped>
    .Navbox {
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        position: fixed;
        left: 0;
        top: var(--Top);
        z-index: 8888;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .NavContent {
            width: 400rpx;
            height: 100%;
        }
        .TimeBox {
            display: flex;
            align-items: center;
            .curentTime {
                color: #333;
                font-size: 28rpx;
                padding-right: 20rpx;
            }
            .allTime {
                color: #333;
                height: 100%;
                font-size: 28rpx;
                padding: 0 20rpx;
            }
            .icon-shaixuan {
                color: #333;
                font-size: 30rpx;
                padding-right: 20rpx;
            }
        }
    }
    :deep.u-tabs__wrapper__nav__line {
        bottom: 0;
    }
    .currentData {
        width: 710rpx;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-around;
        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            .list_title {
                color: #000;
                font-size: 36rpx;
            }
            .list_descr {
                color: #000;
                font-size: 28rpx;
            }
        }
    }
    .statusBox {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: space-around;
        .list {
            font-size: 32rpx;
            height: 100%;
            display: flex;
            align-items: center;
            color: #333;
        }
        .active {
            color: #000;
            font-weight: bold;
        }
    }
    .List {
        width: 710rpx;
        margin: 20rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 0 20rpx;
        .Top {
            width: 100%;
            height: 110rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid $page;
            .TopLeft {
                flex: 1;
                display: flex;
                align-items: center;
                .v_headimg {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
                .info {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                }
            }
            .statusTxt {
                color: #e68170;
            }
        }

        .Center {
            width: 100%;
            height: 220rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid $page;
            .CenterBox1 {
                width: 560rpx;
                height: 100%;
                display: flex;
                align-items: center;
                overflow: hidden;
                .infoImg01 {
                    width: 180rpx;
                    height: 180rpx;
                    margin-right: 18rpx;
                    border-radius: 10rpx;
                }
            }
            .CenterBox2 {
                width: 560rpx;
                height: 100%;
                display: flex;
                align-items: center;
                overflow-x: scroll;
                .lis {
                    display: inline-block;
                    margin-right: 20rpx;

                    .lisBox {
                        width: 430rpx;
                        height: 180rpx;
                        display: flex;
                        align-items: center;

                        .subImg {
                            width: 180rpx;
                            height: 180rpx;
                            border-radius: 10rpx;
                            display: block;
                            margin-right: 14rpx;
                        }
                        .subName {
                            flex: 1;
                            font-size: 24rpx;
                            color: #333;
                        }
                    }
                }
            }
            .viewCount {
                flex: 1;
                padding-left: 20rpx;
                color: #000;
                font-size: 28rpx;
            }
        }

        .Bot {
            width: 100%;
            height: 90rpx;
            display: flex;
            align-items: center;
        }
    }
</style>
